<template>
  <transition name="slide">
    <div class="scene-list">
      <page-header title="场次预约"></page-header>
      <scroll class="list-content" ref="detailScroll">
        <div >
          <div v-for="(item, index) in list" :key="index" class="detail">
            <ul :id="'scene_' + index" name="scene" class="scene-detail" @click="sceneSelect('scene_' + index, item)">
              <li>
                <span>开始时间</span>
                <p>{{item.startTime}}</p>
              </li>
              <li>
                <span>结束时间</span>
                <p>{{item.endTime}}</p>
              </li>
              <li>
                <span>剩余名额</span>
                <p>{{item.number}}</p>
              </li>
            </ul>
          </div>
        </div>
      </scroll>
      <ul class="scene-but" >
        <div class="sign" @click="sceneSave()">确认</div>
      </ul>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Scroll from 'components/scroll/scroll'
  import * as exampleApi from 'api/example'
  import $ from 'jquery'
  export default {
    components: {
      PageHeader,
      Scroll
    },
    data () {
      return {
        list: [],
        page: 1,
        pageSize: 6,
        type: '',
        text: '',
        loading: false,
        nomore: false,
        scene: {},
        applyId: ''
      }
    },
    created() {
      this._initData()
    },
    methods: {
      _initData() {
        this.applyId = this.$route.params.applyId
        exampleApi.modePost('/api/public/wz/activity/getSceneList', ({
          applyId: this.applyId
        })).then(res => {
          if (res.data.code === '0') {
            this.list = res.data.data
          };
        }).catch(error => {
          console.log(error)
        })
      },
      sceneSelect(id, item) {
        this.list.forEach((item, index) => {
          $('#scene_' + index).css('box-shadow', '')
        })
        $('#' + id).css('box-shadow', '0 0 15px 5px #6cf')
        this.scene = item
      },
      sceneSave() {
        let scene = this.scene
        if (!scene.startTime) {
          alert('请选择场次！')
          return false
        }
        if (confirm('确认选择该场')) {
          exampleApi.modePost('/api/public/wz/activity/scene', ({
            applyId: this.applyId,
            sceneRealId: scene.id
          })).then(res => {
            alert(res.data.msg)
            if (res.data.code === '0') {
              this.$router.back(-1)
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .scene-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .list-content{
      height:calc(~"100% - 160px");
      overflow: hidden;
      .detail{
        padding: 0 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        margin-top: 20px;
      }
    }
    .scene-but{
      width: 100%;
      height: 150px;
      background-color: #fff;
      display: flex;
      .sign{
        width: 100%;
        flex: 0 0 100%;
        background-color: #ee4941;
        font-size: 28px;
        line-height: 80px;
        color: #ffffff;
        text-align: center;
      }
      li{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-top: 1px solid#cccccc;
        border-left: 1px solid#cccccc;
        &:nth-child(1) {
           border-left: none;
         }
        span{
          margin-top: 8px;
          font-size: 20px;
          color: #999;
        }
        img{
          width: 26px;
          height: 26px;
        }
      }
    }
  }

.scene-detail{
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  padding:0 20px;
  box-sizing: border-box;
  background-color: #fff;
  li{
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #cccccc;
    display:flex;
    justify-content:space-between;
    align-items: center;
    span{
      font-size: 28px;
      color: #419eff;
    }
    p{
      font-size: 26px;
      color: #999999;
    }
  }
}
</style>
